import { FC, useState } from 'react';
import { styled } from 'styled-components';
import { Form, Input, Button, message, Spin } from 'antd';
import { useNavigate } from 'react-router-dom';
// import { login } from '@/api/services/commonService';
// import { LoginReq } from '#/user'

import bgImg from '@/assets/images/newspaper.png';

const LoginContainer = styled.div`
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100vh;
  padding: 20px 8%;
`;
const FormContainer = styled.div`
  padding: 36px;
  border-radius: 16px;
  background-color: #f1f1f1;
  width: 350px;
  margin: 0 auto;
  .hello {
    font-size: 18px;
    color: #2e6dfe;
    text-align: center;
    margin-bottom: 1.5em;
  }
  .login-btn {
    margin-top: 18px;
  }
`;


const LoginPage: FC = () => {
  const [form] = Form.useForm();
  const [messageApi, contextHolder] = message.useMessage();

  const [loading, setLoading] = useState<boolean>(false);

  const navigate = useNavigate();

  const handleLogin = async () => {
    const values = await form.validateFields();
    setLoading(true);
    try {
      // const res = await login({
      //   ...values,
      //   checkoutSecret: true,
      //   openCaptcha: false,
      //   deviceUniqueId: '',
      //   loginAppVersion: '',
      //   loginDeviceType: 'Mac/Chrome',
      //   loginIsApp: 0,
      // });
      // res.msg && messageApi.success({
      //   content: res.msg,
      // });
      // TODO: 保存用户信息
      setTimeout(() => {
        navigate('/home', { replace: true });
      }, 500);
    } catch (error) {
      console.log(error);
    } finally {
      setLoading(false);
    }
  };

  return (
    <>
      {contextHolder}
      <Spin spinning={loading} fullscreen></Spin>
      <LoginContainer>
        <img src={bgImg} alt="" style={{ width: '500px' }} />
        <FormContainer>
          <p className="hello">欢迎登录</p>
          <Form
            name="basic"
            form={form}
            labelCol={{ span: 0 }}
            wrapperCol={{ span: 24 }}
            initialValues={{ remember: true }}
            autoComplete="off"
          >
            <Form.Item
            // <LoginReq>
              label="用户名"
              name="username"
              rules={[{ required: true, message: '请输入用户名!' }]}
            >
              <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item
            // <LoginReq>
              label="密码"
              name="password"
              rules={[{ required: true, message: '请输入密码!' }]}
            >
              <Input placeholder="请输入密码" />
            </Form.Item>
          </Form>

          <div className="login-btn">
            <Button block type="primary" onClick={handleLogin}>
              登 录
            </Button>
          </div>
        </FormContainer>
      </LoginContainer>
    </>
  );
};

export default LoginPage;
